import { memo, useEffect } from 'react'
import useGetPageInfo from '@/hooks/useGetPageInfo'
import { Form, Input } from 'antd'
import { useDispatch } from 'react-redux'
import { resetPageInfo } from '@/store/modules/pageInfoReducer'

const { TextArea } = Input

const PageSetting = memo(() => {
  const pageInfo = useGetPageInfo()
  const [form] = Form.useForm()
  const dispatch = useDispatch()

  useEffect(() => {
    form.setFieldsValue(pageInfo)
  }, [pageInfo])

  const handleFormChange = () => {
    dispatch(resetPageInfo({ ...pageInfo, ...form.getFieldsValue() }))
  }

  return (
    <Form form={form} layout="vertical" initialValues={pageInfo} onValuesChange={handleFormChange}>
      <Form.Item
        label="问卷标题"
        name="title"
        rules={[{ required: true, message: '请输入问卷标题' }]}
      >
        <Input placeholder="请输入问卷标题" />
      </Form.Item>
      <Form.Item label="问卷描述" name="desc">
        <Input placeholder="请输入问卷描述" />
      </Form.Item>
      <Form.Item label="js代码" name="js">
        <TextArea placeholder="请输入js代码" />
      </Form.Item>
      <Form.Item label="css代码" name="css">
        <TextArea placeholder="请输入css代码" />
      </Form.Item>
    </Form>
  )
})

export default PageSetting
